<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="root"></div>
		<script type="text/babel">
			class Demo extends React.Component {
				showData=()=>{
					console.log(this.refs.inputOnBlur);
					const {onBlur}=this.refs
					alert(onBlur.value)
				}
				showDataOffblur=()=>{
					const {offBlur}=this.refs
					alert(offBlur)
				}
				render(){
					return(
						<div>
							<input ref="inputOnBlur" type="text" placeholder="onblur"/>
							<input ref={c=>this.onBlur=c} type="text" placeholder="onblur"/>
							<button onClick={this.showData} >click me</button>
							<input  ref="inputOffBlur" onBlur={this.showDataOffblur} type="text" placeholder="offblur"/>
						</div>
					)
				}
				
			}
			ReactDOM.render( <Demo / > , document.getElementById('root'));
		</script>
	</body>
</html>
